<template>
	<van-button :type="componentModel.colorType==null||componentModel.colorType==''?'primary':componentModel.colorType" :style="componentModel.cssStyle" size="small" @click="onClickHandler"
		:block="componentModel.block" style="margin-left:5px;margin-top:5px;">{{label}}</van-button>
	<van-popup v-model:show="popupShow" closeable :style="{ height: '100%',width:'100%' }" :lazy-render="false">
		<component :is="tempClientPageCode" :currentId="currentId" :model="componentModel.model"
			@closeDialogEvent="onDialogCloseHandler" ref="dynamicComponent">
		</component>
	</van-popup>
</template>

<script>
	import {
		sendComponentEventRequest
	} from '@/utils/requestUtils.js';
	import {
		getPageData
	} from '@/utils/pageUtils.js';
	import {
		Dialog
	} from 'vant';
	import utils from '@/utils/utils.js';
	export default {
		name: "ButtonComponent",
		props: ["componentModel", "highlight", "actionScope", "rowData"],
		data() {
			return {
				visible: true,
				label: "",
				tempClientPageCode: undefined,
				currentId: undefined,
				popupShow: false
			}
		},
		inject: ['children'],
		mounted() {
			this.children.push(this);
			if (this.componentModel.label != undefined) {
				this.label = this.componentModel.label;
			}
		},beforeUnmount() {
			utils.removeArrayElement(this.children,this);
		},
		methods: {
			onClickHandler() {
				if (this.actionScope != undefined) {
					this.$emit('click');
					return;
				}
				if (this.componentModel.confirmMessage != undefined) {
					Dialog.confirm({
							title: '提示',
							message: this.componentModel.confirmMessage,
						})
						.then(() => {
							this.processClick();
						})
						.catch(() => {
							// on cancel
						});
				} else {
					this.processClick();
				}
			},
			processClick() {
				if (this.componentModel.clientPageCode != undefined) {
					this.tempClientPageCode = this.componentModel.clientPageCode;
					this.popupShow = true;
					this.$nextTick(function() {
						this.$refs.dynamicComponent.init();
					});
					return;
				} else if (this.componentModel.serverPageCode != undefined) {
					this.tempClientPageCode = "mobile-page-component";
					this.popupShow = true;
					this.$nextTick(function() {
						this.$refs.dynamicComponent.navigatePage(this.componentModel.serverPageCode, {}, true);
					});
					return;
				}
				if (this.actionScope != undefined) {
					this.$emit('click');
					return;
				}
				if (this.rowData == undefined) {
					sendComponentEventRequest(this, "clickEvent", {});
				} else {
					sendComponentEventRequest(this, "clickEvent", {
						"id": this.rowData["id"]
					});
				}
			},
			setProp(prop) {
				for (var k in prop) {
					if (k == "visible") {
						this.visible = prop[k];
					} else if (k == "label") {
						this.label = prop[k];
					} else if (k == "currentId") {
						this.currentId = prop[k];
					}
				}
			},
			onParaCallback() {
				var data = getPageData(this.$refs.dynamicComponent, this.children);
				this.popupShow = false;
				var newData = {};
				for (var k in data) {
					newData[this.componentModel.id + "_" + k] = data[k];
				}
				if (this.rowData != undefined) {
					newData["id"] = this.rowData["id"];
				}
				sendComponentEventRequest(this, "clickEvent", newData);
			},
			onDialogCloseHandler() {
				this.popupShow = false;
			}
		},
	}
</script>

<style>
	
</style>
